<template>
  <fullScreenContainer title="产业集群总体分析一张图" type='fullScreenContainer' :leftList="menuList" :rightList="rightList">
    <template slot="leftContent">
      <Panel key="jdfj" title="种业情况分析" height="35%">
        <template slot="right">
          <div class="tab-button">
            <button :class="clsx('no-select-button', selectTabs1 === 0 ? 'select-button' : '')"
              @click="fn('11')">种子销售均价</button>
            <button :class="clsx('no-select-button', selectTabs1 === 1 ? 'select-button' : '')"
              @click="fn('12')">种子亩投入</button>
          </div>
        </template>
        <XyzTransition v-if="selectTabs1 === 0" appear="false" xyz="duration-0 ">
          <dv-scroll-board v-mouseenter="handleMouseEnterTrack" style="height: 95%" :config="dataVconfig2" />
        </XyzTransition>
        <div style="height: 95%">
          <echartsDemo v-if="selectTabs1 === 1" key="zzmtr-k" :initData="zzmtr" :initChart="barChart"></echartsDemo>
        </div>
      </Panel>
      <Panel key="jdfl" title="种植情况分析" class="flex1" height="35%">
        <template slot="right">
          <div class="tab-button">
            <button :class="clsx('no-select-button', selectTabs2 === 0 ? 'select-button' : '')"
              @click="fn('21')">面积</button>
            <button :class="clsx('no-select-button', selectTabs2 === 1 ? 'select-button' : '')"
              @click="fn('22')">产量</button>
            <button :class="clsx('no-select-button', selectTabs2 === 2 ? 'select-button' : '')"
              @click="fn('23')">产值</button>
            <button :class="clsx('no-select-button', selectTabs2 === 3 ? 'select-button' : '')"
              @click="fn('24')">排名</button>
          </div>
        </template>
        <div style="height: 90%">
          <echartsDemo key="cyl-k" :initData="cyl" :initChart="selectPieChart"></echartsDemo>
        </div>
      </Panel>
      <Panel key="jdyyms" title="加工情况分析" class="flex1" height="30%">
        <template slot="right">
          <div class="tab-button">
            <button :class="clsx('no-select-button', selectTabs3 === 0 ? 'select-button' : '')"
              @click="fn('31')">趋势</button>
            <button :class="clsx('no-select-button', selectTabs3 === 1 ? 'select-button' : '')"
              @click="fn('32')">占比</button>
            <button :class="clsx('no-select-button', selectTabs3 === 2 ? 'select-button' : '')"
              @click="fn('33')">龙头企业</button>
          </div>
        </template>
        <echartsDemo key="scqk" :initData="jgqkfx" :initChart="selectPieChart3">
        </echartsDemo>
      </Panel>
    </template>
    <template slot="rightContent">
      <Panel key="cgmj" title="科技创新与经营发展情况分析" class="flex1" height="35%">
        <template slot="right">
          <div class="tab-button">
            <button :class="clsx('no-select-button', selectTabs4 === 0 ? 'select-button' : '')"
              @click="fn('41')">科技创新</button>
            <button :class="clsx('no-select-button', selectTabs4 === 1 ? 'select-button' : '')"
              @click="fn('42')">带动农民</button>
          </div>
        </template>
        <div class="jdfj-box">
          <div class="jdfj-left-box" v-for="item,index in cygk1">
            <img :src="selectTabs4 === 0 ? kjcx[index] : ddnm[index]" alt="" srcset="" />
            <div class="jdfj-right-box-1">
              <div class="right-top" style="justify-content: center;">
                <span class="number">{{ item.value }} </span>
                <span class="text">{{ item.number }}</span>
              </div>
              <div class="right-bottom" style="text-align: center;">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </Panel>
      <Panel key="xjnrfx" title="三产情况分析" class="flex1" height="30%">
        <template slot="right">
          <div>
            单位：万元
          </div>
        </template>
        <echartsDemo key="scqk" :initData="scqk" :initChart="barChart"></echartsDemo>
      </Panel>
      <Panel key="rsfx" title="物流及营销分析" class="flex1" height="35%">
        <template slot="right">
          <div class="tab-button">
            <button :class="clsx('no-select-button', selectTabs5 === 0 ? 'select-button' : '')"
              @click="fn('51')">品牌建设</button>
            <button :class="clsx('no-select-button', selectTabs5 === 1 ? 'select-button' : '')"
              @click="fn('52')">仓储物流</button>
          </div>
        </template>
        <XyzTransition  v-if="selectTabs5 === 1" appear xyz="duration-0">
          <dv-scroll-board v-mouseenter="handleMouseEnterTrack" style="height: 85%" :config="dataVconfig3" />
        </XyzTransition>
        <div class="ppjs-box" v-if="selectTabs5 === 0">
          <div class="ppjs-left-box"
               :class="clsx('no-all-width ', index == 4 ? 'all-width cursor-pointer' : index == 0 ? '':'cursor-pointer')"
               v-for="item,index in pajs" @click="showPop(item)">
              <img :src="ppjs[index]" alt="" srcset="" />
              <div class="ppjs-right-box-1">
                <div class="right-top">
                  <span class="number" :class="index == 0 ? 'all-span-width':''">{{ item.number }} </span>
                  <span class="text" v-if="index != 0">{{ item.unit }}</span>
                </div>
                <div class="right-bottom">
                  {{ item.name }}
                </div>
              </div>
          </div>
        </div>
      </Panel>
    </template>
    <template slot="fullScreenMap">
      <div class="map-page-container">
        <Map ref="Map"></Map>
      </div>
    </template>
    <template slot="centerContent">
      <map-tools :layerTabsShow="false" :menuShow1="false" :menuShow3="false" :menuShow4="true"
                 @iconChange="iconChange" @projectIconChange="cyChange"></map-tools>
    </template>
    <template slot="centerContent">
      <div class="video-popu" v-if="isPopuWin">
        <div class="popup-panel">
          <div class="popup-panel-title">
            <div class="popup-panel-title-content">
              <div class="popup-panel-title-content-info">
                <img :src="titleIcon" alt="关闭">
                <span>{{ popuTitle }}</span>
              </div>
              <img :src="closeIcon" alt="关闭" @click="isPopuWin = false">
            </div>
          </div>
          <div class="popup-panel-content">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="name" label="产品名称" width="120">
              </el-table-column>
              <el-table-column prop="companyName" label="持标主体" width="180" v-if="tableColShow">
              </el-table-column>
              <el-table-column prop="address" label="区域" width="80">
              </el-table-column>
              <el-table-column prop="production" label="认证产量(吨)" width="100" v-if="tableColShow">
              </el-table-column>
              <el-table-column prop="productive" label="认证产值(万元)" width="120" v-if="tableColShow">
              </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" :total="total" :page-size="8" @current-change="currentChange">
            </el-pagination>
          </div>
        </div>
      </div>
    </template>
  </fullScreenContainer>
</template>
<script>
import closeIcon from '../twinScreen/images/popup-close-icon.png'
import titleIcon from '../twinScreen/images/popup-icon.png'
import clsx from 'clsx'
import CountTo from "vue-count-to";
import Map from '@/Iframe/kcgis3x.vue'
import MapTools from '@/layout/components/Center/index.vue'
import EchartsDemo from '@/echartsDemo/index.vue'
import tinycolor from 'tinycolor2'
import barChart from './barChart'
import barLineChart from './barLineChart'
import layerData from './gisData/gisLayerData'
import home from './home.png'
import ddnm0 from './images/ddnm0.png';
import ddnm1 from './images/ddnm1.png';
import ddnm2 from './images/ddnm2.png';
import ddnm3 from './images/ddnm3.png';
import kjcx0 from './images/kjcx0.png';
import kjcx1 from './images/kjcx1.png';
import kjcx2 from './images/kjcx2.png';
import ppjs0 from './images/ppjs0.png';
import ppjs1 from './images/ppjs1.png';
import ppjs2 from './images/ppjs2.png';
import ppjs3 from './images/ppjs3.png';
import ppjs4 from './images/ppjs4.png';

import pieChart from './pieChart'
import pieNormalChart from './pieNormalChart'
import pmChart from './pmChart'
import { getChartData, getAllSeedAnalysisList, getAllStorageList, getAllMarketingList, getAllMarketingCount } from "@/apis/bigAllIndustryIndex";
import projectLayerData from "../templateBigScreen2/gisData/projectLayerData";
import industryLayerData from '../templateBigScreen2/gisData/industryLayerData';
import xzqhData from "../templateBigScreen2/gisData/qxxzqh";

export default {
  components: {
    CountTo, Map, MapTools, EchartsDemo
  },
  directives: {
    mouseenter: {
      bind(el, binding, vnode) {
        el.addEventListener("mouseenter", binding.value);
      },
      unbind(el, binding, vnode) {
        el.removeEventListener("mouseenter", binding.value);
      },
    },
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      tableColShow:true,
      titleIcon,
      closeIcon,
      isPopuWin: false,
      popuTitle: '绿色食品品牌',
      industryLayerData,
      projectLayerData,
      clsx,
      home,
      ddnm:[ddnm0,ddnm1,ddnm2,ddnm3],
      kjcx:[kjcx0,kjcx1,kjcx2],
      ppjs:[ppjs0,ppjs1,ppjs2,ppjs3,ppjs4],
      layerData,
      xzqhData,
      pieChart,
      pieNormalChart,
      barChart,
      pmChart,
      barLineChart,
      selectTabs5: 0,
      selectTabs1: 0,
      selectTabs2: 0,
      selectTabs3: 0,
      selectTabs4: 0,
      menuList: [],

      rightList: [
      ],
      cyl: {
        //   legendData:['总产值'],
        //seriesData:[{value:100,name:'总产值'}]
      },
      zzmtr: {},
      jgqkfx: {},
      scqk: {},
      cygk1: [
        {
          number: '0',
          name: '规模以上农产品加工业营收',
        },
        {
          number: '0',
          name: '农产品加工业产值与农业总产值比例',
        },
        {
          number: '0',
          name: '农产品加工业产值与农业总产值比例',
        },
      ],
      pajs: [
        {
          number: '全产业',
          unit: '',
          name: '省级区域公共',
          type: '0',
        },
        {
          number: '900',
          unit: '个',
          name: '绿色食品',
          type: '1',
        },
        {
          number: '22',
          unit: '个',
          name: '有机食品',
          type: '2',
        },
        {
          number: '5',
          unit: '个',
          name: '"一县一特"',
          type: '3',
        },
        {
          number: '5',
          unit: '个',
          name: '地理标志农产品',
          type: '4',
        },
      ],
      zoom: 15,
      dataVconfig2: {
        header: ["作物类别", "二级类别", "品种", "规格", "均价(元)"],
        headerBGC: tinycolor('#124A3F').setAlpha(0.3).toString(),
        data: [

        ],
        oddRowBGC: "transparent",
        evenRowBGC: "transparent",
        waitTime: 3000,
        rowNum: 5,
      },
      dataVconfig3: {
        header: ["序号", "集散中心/专业市场", "所在地", "产业大类", "产业小类"],
        headerBGC: tinycolor('#124A3F').setAlpha(0.3).toString(),
        data: [

        ],
        index: false,
        columnWidth: [50, 150],
        indexHeader: "序号",
        oddRowBGC: "transparent",
        evenRowBGC: "transparent",
        waitTime: 3000,
        rowNum: 5,
      },
      data3: [
        {
          name: "data1",
          value: [200, 3000, 20000, 35000, 50000, 18000],
        },
        {
          name: "data2",
          value: [5000, 14000, 28000, 26000, 42000, 21000],
        },
      ],
      mapStyle: "amap://styles/blue",
      center: [121.5273285, 31.21515044],
      circles: [
        {
          center: [121.5273285, 31.21515044],
          radius: 200,
          fillOpacity: 0.5,
          events: {
            click: () => {
              alert("click");
            },
          },
        },
      ],
      config: {
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 78,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
          {
            name: "信阳",
            value: 45,
          },
          {
            name: "漯河",
            value: 29,
          },
        ],
        awaitTime: 5000
      },
      type: "1",
      cyType: "0",
    };
  },
  created() {

    this.getData();


  },
  mounted() {
    this.$nextTick(() => {
      this.showGisLayer("0", this.projectLayerData, 1);
    });
  },
  computed: {
    selectPieChart() {
      if (this.selectTabs2 == 3) {
        return this.pmChart;
      } else {
        return this.pieChart;
      }
    },
    selectPieChart3() {
      if (this.selectTabs3 == 0) {
        return this.barLineChart;
      } else if (this.selectTabs3 == 1) {
        return this.pieNormalChart;
      } else {
        return this.pieNormalChart;
      }
    },
  },
  methods: {

    fn(type) {
      switch (type) {
        case "11": this.selectTabs1 = 0; this.getAllSeedAnalysisList(); break;
        case "12": this.selectTabs1 = 1; this.getChartData3(); break;
        case "21": this.selectTabs2 = 0; this.getChartData1(); break;
        case "22": this.selectTabs2 = 1; this.getChartData1(); break;
        case "23": this.selectTabs2 = 2; this.getChartData1(); break;
        case "24": this.selectTabs2 = 3; this.getChartData1(); break;
        case "31": this.selectTabs3 = 0; this.getChartData4(); break;
        case "32": this.selectTabs3 = 1; this.getChartData5(); break;
        case "33": this.selectTabs3 = 2; this.getChartData6(); break;
        case "41": this.selectTabs4 = 0; this.getChartData7(); break;
        case "42": this.selectTabs4 = 1; this.getChartData7(); break;
        case "51": this.selectTabs5 = 0; this.getAllMarketingCount(); break;
        case "52": this.selectTabs5 = 1; this.getAllStorageList(); break;
      }
    },
    initCallback(option, chart) { },
    setUpdate(chart) { },
    handleMouseEnterTrack() {

    },
    iconChange(data) {
      let layerTypeList = data.filter(item => {
        return item.checked;
      });
      let layerType = layerTypeList.map(item => item.value).join(",");
      this.showGisLayer(layerType, this.industryLayerData, 0);

    },
    cyChange(data) {
      this.cyType = data;
      this.getData();
      this.showGisLayer(data, this.projectLayerData, 1);
    },
    getData() {
      //  this.cyl= {
      //     legendData:['表头','项目区','非项目区'],
      //     seriesData:[{value:0,name:'表头'},{value:100,name:'项目区'},{value:20,name:'非项目区'}]
      //   }
      if (this.selectTabs1 == 0) {
        this.getAllSeedAnalysisList();
      } else {
        this.getChartData3();
      }
      this.getChartData1();
      this.getChartData2();
      this.getData3();
      this.getChartData7();
      if (this.selectTabs5 == 1) {
        this.getAllStorageList();
      } else {
        this.getAllMarketingCount();
      }

    },
    getAllSeedAnalysisList() {
      let params = {"layerType": this.cyType};
      getAllSeedAnalysisList(params).then(res => {
        this.dataVconfig2.data = [];
        let data = [];
        res.data.map(e => {
          let data1 = [];
          data1.push(e.firstType);
          data1.push(e.secondType);
          data1.push(e.name);
          data1.push(e.unit);
          data1.push(e.price);
          data.push(data1);
        })
        this.dataVconfig2.data = data;
        this.dataVconfig2 = { ...this.dataVconfig2 };
      });
    },
    getAllStorageList() {
      let params = { "layerType": this.cyType };
      getAllStorageList(params).then(res => {
        //executeOorgname,zs
        this.dataVconfig3.data = [];
        let data = [];
        res.data.map(e => {
          let data1 = [];
          data1.push(e.orderBy);
          data1.push(e.name);
          data1.push(e.address);
          data1.push(e.firstType);
          data1.push(e.secondType);
          data.push(data1);
        })
        this.dataVconfig3.data = data;
        this.dataVconfig3 = { ...this.dataVconfig3 };
      });
    },
    getAllMarketingCount() {
      let params = { "layerType": this.cyType };
      getAllMarketingCount(params).then(res => {
        let data = res.data;
        const data1 = data.find(item => item.firstType == "绿色食品") || {};
        const data2 = data.find(item => item.firstType == "有机食品") || {};
        const data3 = data.find(item => item.firstType == "一县一特") || {};
        const data4 = data.find(item => item.firstType == "地理标志农产品") || {};
        this.pajs[1].number = data1.value || 0;
        this.pajs[2].number = data2.value || 0;
        this.pajs[3].number = data3.value || 0;
        this.pajs[4].number = data4.value || 0;
      });
      params.chartName = "物流及营销分析-品牌建设-省级区域公共";
      getChartData(params).then(res => {
        this.pajs[0].number =  "";
        if(res.data){
          if(res.data.length > 1){
            this.pajs[0].number = '全产业';
          }else {
            this.pajs[0].number = res.data[0].name || '';
          }
        }
      });
    },
    showPop(data) {
      debugger
      this.pageNum = 1;
      this.tableColShow = true;
      if (data.type == "1") {
        this.firstType = "绿色食品";
      } else if (data.type == "2") {
        this.firstType = "有机食品";
      } else if (data.type == "3") {
        this.firstType = "一县一特";
        this.tableColShow = false;
      } else if (data.type == "4") {
        this.firstType = "地理标志农产品";
      }else {
        return;
      }

      this.getAllMarketingList();
    },
    currentChange(val) {
      debugger
      this.pageNum = val;
      this.getAllMarketingList();
    },
    getAllMarketingList() {
      let params = { "layerType": this.cyType, "firstType": this.firstType, pageSize: 8, pageNum: this.pageNum };
      this.popuTitle = this.firstType;
      getAllMarketingList(params).then(res => {
        this.isPopuWin = true;
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    async getChartData1() {
      let type = this.selectTabs2;
      let chartName = "种植情况分析-面积";
      let title = "";
      let unit = "";
      switch (type) {
        case 0: chartName = "种植情况分析-面积"; title = "总面积"; unit = "万亩"; break;
        case 1: chartName = "种植情况分析-产量"; title = "总产量"; unit = "万吨"; break;
        case 2: chartName = "种植情况分析-产值"; title = "总产值"; unit = "亿元"; break;
      }
      //0、1、2饼图3排名
      if (type != 3) {
        let params = { "layerType": this.cyType, "chartName": chartName };
        getChartData(params).then(res => {
          this.cyl = {};
          let data = this.formatChartData(res.data);
          data.title = title;
          data.unit = unit;
          this.cyl = data;
        });
      } else {
        const pm = await this.getPMData("种植情况分析-排名");
        pm.sort(function (a, b) {
          return a.value - b.value;
        })
        const mj = pm.filter(item => item.secondName == "面积");
        const cl = pm.filter(item => item.secondName == "产量");
        const cz = pm.filter(item => item.secondName == "产值");
        this.cyl = {};
        let data = {};
        data.data1 = mj.map(item => item.name);
        data.data2 = cl.map(item => item.name);
        data.data3 = cz.map(item => item.name);
        data.data4 = mj.map(item => item.value);
        data.data5 = cl.map(item => item.value);
        data.data6 = cz.map(item => item.value);
        this.cyl = data;
      }
    },
    getChartData2() {
      let params = {  "layerType": this.cyType,"chartName": "三产情况分析" };
      getChartData(params).then(res => {
        this.scqk = {};
        let data = this.formatChartData(res.data);
        this.scqk = data;
      });
    },
    getChartData3() {
      let params = { "layerType": this.cyType,"chartName": "种业情况分析-种植亩投入" };
      getChartData(params).then(res => {
        this.zzmtr = {};
        let data = this.formatChartData(res.data);
        this.zzmtr = data;
      });
    },
    getData3() {
      if (this.selectTabs3 == 0) {
        this.getChartData4();
      } else if (this.selectTabs3 == 1) {
        this.getChartData5();
      } else {
        this.getChartData6();
      }
    },
    getChartData4() {
      let params = { "layerType": this.cyType, "chartName": "加工情况分析-趋势" };
      getChartData(params).then(res => {
        this.jgqkfx = {};
        let data = {};
        let data1 = res.data.filter(item => item.secondName == "项目区产值");
        let data2 = res.data.filter(item => item.secondName == "全省产值");
        let data3 = res.data.filter(item => item.secondName == "项目区加工产量");
        let data4 = res.data.filter(item => item.secondName == "全省加工产量");
        data1.sort((a, b) => { return a.name - b.name });
        data2.sort((a, b) => { return a.name - b.name });
        data3.sort((a, b) => { return a.name - b.name });
        data4.sort((a, b) => { return a.name - b.name });
        data.xAxis = data1.map(item => item.name);
        data.data1 = data1.map(item => item.value);
        data.data2 = data2.map(item => item.value);
        data.data3 = data3.map(item => item.value);
        data.data4 = data4.map(item => item.value);
        this.jgqkfx = data;
      });
    },
    getChartData5() {
      let params = { "layerType": this.cyType, "chartName": "加工情况分析-占比" };
      getChartData(params).then(res => {
        this.jgqkfx = {};
        let data1 = res.data.filter(item => item.secondName == "加工产量");
        let jgcl = this.formatChartData(data1);
        jgcl.unit = "万元"
        this.jgqkfx = jgcl;
      });
    },
    getChartData6() {
      let params = { "layerType": this.cyType, "chartName": "加工情况分析-龙头企业" };
      getChartData(params).then(res => {
        this.jgqkfx = {};
        let jgcl = this.formatChartData(res.data);
        jgcl.unit = "个"
        this.jgqkfx = jgcl;
      });
    },
    getChartData7() {
      let chartName = "科技创新与经营发展情况分析-科技创新";
      if (this.selectTabs4 == 1) {
        chartName = "科技创新与经营发展情况分析-带动农民";
      }
      let params = { "layerType": this.cyType, "chartName": chartName };
      getChartData(params).then(res => {
        this.cygk1 = [];
        res.data.forEach((e, index) => {
          var data = { "number": e.secondName, "name": e.name,"value":e.value };
          if (index < 4) {
            this.cygk1.push(data);
          }
        });
      });
    },
    getPMData(chartName) {
      return new Promise((resolve, reject) => {
        let params = { "layerType": this.cyType, "chartName": chartName };
        getChartData(params).then(res => {

          resolve(res.data);
        }).catch((error) => {
          reject(error);
        });
      });
    },
    formatChartData(data) {
      let legendData = [];
      let seriesData = [];
      let result = {};
      let total = 0;
      data.forEach(e => {
        legendData.push(e.name);
        seriesData.push({ "name": e.name, "value": e.value, "tb": e.tb });
        total += e.value;
      });
      result.legendData = legendData;
      result.xAxisData = legendData;
      result.seriesData = seriesData;
      result.total = total;
      return result;
    },
    showGisLayer(layerType, layerData, type) {
      this.clearGisLayer();
      if (layerType && layerData && layerData.length > 0) {
        const layerTypeArray = layerType.split(',').map(pid => parseInt(pid, 10));
        const layersToShow = layerTypeArray.map(pid => this.findLayerByPid(type, pid)).filter(layer => layer !== undefined);
        if (type === 0) {
          this.displayLayers(layersToShow);
        } else {
          this.displayProjectLayers(layersToShow)
        }
      }
    },


    findLayerByPid(type, pid) {
      const layerData = type === 0 ? this.industryLayerData : this.projectLayerData;
      return layerData.find(layer => layer.pid === pid);
    },

    displayProjectLayers(layers) {
      layers.forEach(layer => {
        let mergedPolygon = [];
        let htmlData = [];
        layer.xzqh.forEach(xzqhItem => {
          const multiPolygon = this.getMultiPolygonByCode(xzqhItem.code);
          const coordinates = multiPolygon.geometry.coordinates;
          const properties = multiPolygon.properties;
          const html = this.buildProjectIconHtml(xzqhItem.dbzp);
          htmlData.push({
            x: properties.x,
            y: properties.y,
            html: html
          })
          coordinates.forEach(coord => {
            mergedPolygon.push({
              polyArr: coord,
              style: {
                color: layer.material.polygon.color,
                alpha: layer.material.polygon.alpha
              }
            })
          });
        })
        this.addGisLayer(mergedPolygon, htmlData);
      })
    },

    buildProjectIconHtml(dbzp) {
      let resHtml = '';
      if (dbzp && dbzp.length) {
        dbzp.forEach((item, index1) => {
          resHtml += `<div class="label-container purple-background">
                    <img src="${item.icon}" alt="图标" class="icon">
                    <span class="label-text">${item.name}</span>
                  </div>`;
        });
      }
      return resHtml;
    },

    buildIndustryIconHtml(dbzp) {
      if (!dbzp || !dbzp.length) return '';
      const containerClass = 'label-container purple-background';
      const iconClass = 'label-icon2';
      const textClass = 'label-text2';
      return dbzp.map(item => {
        const textStyle = `background-color: ${item.color || '#FFF482'}`;
        return `
            <div class="${containerClass}">
              <img src="${item.icon}" alt="图标" class="${iconClass}">
              <span class="${textClass}" style="${textStyle}">${item.name}</span>
            </div>
          `;
      }).join('');
    },


    displayLayers(layers) {
      // 实现显示图层的逻辑
      layers.forEach(layer => {
        let mergedPolygon = [];
        let htmlData = [];
        layer.cyd.forEach(cydItem => {
          cydItem.xzqh.forEach(xzqh => {
            const multiPolygon = this.getMultiPolygonByCode(xzqh.code);
            const coordinates = multiPolygon.geometry.coordinates;
            const properties = multiPolygon.properties;
            const html = this.buildIndustryIconHtml(xzqh.dbzp);
            htmlData.push({
              x: properties.x,
              y: properties.y,
              html: html
            })
            coordinates.forEach(coord => {
              mergedPolygon.push(
                {
                  polyArr: coord,
                  style: {
                    color: cydItem.material.polygon.color || 'FCC152',
                    alpha: cydItem.material.polygon.alpha || 0.5
                  },
                  label: {
                    text: cydItem.name,
                    textStyle: {
                      fillColor: cydItem.material.label.fillColor || '#d31313',
                      outlineColor: cydItem.material.label.outlineColor || '#ffffff',
                    }
                  }
                })
            });
          })
        })
        this.addGisLayer(mergedPolygon, htmlData);
      });
    },

    addGisLayer(mergedPolygon, htmlData) {
      if (window.kcgis&& window.mapApi) {
        window.mapApi.addNativePolygon(mergedPolygon,htmlData);
      }
    },

    clearGisLayer() {
      if (window.kcgis&& window.mapApi) {
        window.mapApi.clearAllVectorLayer();
      }
    },


    getMultiPolygonByCode(code) {
      const feature = this.xzqhData.features.find(feature => feature.properties.code === code);
      if (feature) {
        return feature;
      } else {
        return null; // 如果找不到匹配的code，返回null
      }
    },
  },
};
</script>
<style scoped lang="scss">
.num,
.zb {
  color: #fff;
}

.jdfj-bar {
  margin-top: 18px;
  height: 266px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  flex-grow: 1;
  align-self: stretch;

  z-index: 2;
}

.ppjs-box {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  padding: 5px 5px;
  gap: 16px;
}
.cursor-pointer{
  cursor: pointer;
}
.ppjs-left-box {
  /* 自动布局子元素 */
  width: 48%;
  border-radius: 5px;
  opacity: 1;
  /* 自动布局 */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px 24px;
  gap: 16px;

  /* 图标背景 */
  background: linear-gradient(180deg, rgba(59, 214, 172, 0.1) 0%, rgba(59, 214, 172, 0) 100%);

  box-sizing: border-box;
  border: 1px solid rgba(124, 181, 168, 0.34);

  z-index: 0;

  .ppjs-right-box-1 {
    .right-top {
      opacity: 1;
      /* 自动布局 */
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 5px;
      z-index: 0;

      .number {
        /* 自动布局子元素 */
        position: static;
        left: 0px;
        top: 0px;
        height: 24px;
        opacity: 1;

        font-family: DIN;
        font-size: 24px;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: 0em;

        font-variation-settings: 'opsz' auto;
        background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        z-index: 0;
      }

      .text {
        /* 自动布局子元素 */
        opacity: 0.8;
        font-family: 思源黑体;
        font-size: 14px;
        font-weight: 350;
        line-height: 14px;
        letter-spacing: 0em;

        /* 纯白 */
        color: #ffffff;

        z-index: 1;
      }
    }

    .right-bottom {
      /* 自动布局子元素 */
      height: 21px;
      opacity: 1;

      font-family: 思源黑体;
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      text-transform: uppercase;
      letter-spacing: 1px;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      /* 文字白 */
      color: #ffffff;

      z-index: 1;
      margin-top: 10px;
    }
  }
}

.jdfj-box {
  margin-top: 32px;
  display: flex;
  flex-wrap:nowrap;
  padding: 5px 10px;
  gap: 16px;
}

.jdfj-left-box {
  width: 83px;
  height: 197px;
  border-radius: 5px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction:column;
  align-items: center;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 20px;
  text-align: center;
  justify-content: center;
  flex-grow: 1;

  background: linear-gradient(180deg,
      rgba(59, 214, 172, 0.1) 0%,
      rgba(59, 214, 172, 0) 100%);

  box-sizing: border-box;
  border: 1px solid rgba(124, 181, 168, 0.34);

  z-index: 0;

  .jdfj-right-box-1 {
    .right-top {
      height: 24px;
      opacity: 1;

      /* 自动布局 */
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;

      z-index: 0;

      .number {
        font-family: DIN;
        font-size: 24px;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: 0em;

        font-variation-settings: 'opsz' auto;
        background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        z-index: 0;
      }

      .text {
        opacity: 0.8;
        font-family: 思源黑体;
        font-size: 14px;
        font-weight: 350;
        line-height: 14px;
        letter-spacing: 0em;

        /* 纯白 */
        color: #ffffff;

        z-index: 1;
      }
    }

    .right-bottom {
      height: 21px;
      opacity: 1;

      font-family: 思源黑体;
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      text-transform: uppercase;
      letter-spacing: 1px;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      /* 文字白 */
      color: #ffffff;

      z-index: 1;
      margin-top: 10px;
    }
  }
}

.jdfj-tz {
  margin-top: 32px;
}

.jdfj-tb {
  width: 100%;
  height: 240px;
}

.jdfl {
  align-items: center;

  .right {
    // display: flex;
    // flex-direction: column;
    // gap: 20px;
    margin-top: 15px;

    .bottom {
      margin-top: 20px;
    }
  }
}

.jdfl-two {
  margin-top: 30px;
}

.flex1 {
  margin-top: 0px;
}

.tz-box {
  width: 174px;
  height: 176px;
  border-radius: 5px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  gap: 16px;
  flex-grow: 1;
  align-self: stretch;

  background: linear-gradient(180deg,
      rgba(59, 214, 172, 0.1) 0%,
      rgba(59, 214, 172, 0) 100%);

  z-index: 0;
}
.no-all-width{
  width: 47.5%;
}
.all-width{
  width: 99%;
  padding-left: 30%;
}
.span-width{
  width: 100%;
}
.select-button {
  background: rgba(59, 214, 172, 0.49) !important;
  font-weight: bold;
  cursor:pointer;
}

.no-select-button {
  background: rgba(59, 214, 172, 0.1);
  border-radius: 2px;
  color: white;
  padding: 6px;
  border: none;
  cursor:pointer;
}

.tab-button {
  display: flex;
  gap: 6px;
}

.video-popu {
  position: absolute;
  z-index: 1;
  left: 22%;
  top: 20%;

  .popup-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;

    .popup-panel-title {
      height: 46px;
      opacity: 1;
      display: flex;
      flex-direction: column;
      padding: 8px;
      align-self: stretch;
      background: linear-gradient(270deg, rgba(23, 95, 79, 0) 0%, #175F4F 72%, rgba(23, 95, 79, 0) 100%);

      .popup-panel-title-content {
        height: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        align-self: stretch;

        .popup-panel-title-content-info {
          width: 104.01px;
          height: 30px;

          >span {
            position: absolute;
            font-family: YouSheBiaoTiHei;
            font-size: 20px;
            font-weight: normal;
            line-height: 30px;
            letter-spacing: 2px;
            color: #FFFFFF;
            margin-left: 5px;
          }

          >img {
            margin-top: 7px;
            width: 16.01px;
            height: 16px;
          }
        }

        >img {
          /* 自动布局子元素 */
          position: static;
          left: 245px;
          top: 3px;
          width: 24px;
          height: 24px;
          opacity: 1;

          z-index: 2;
        }
      }
    }

    .popup-panel-content {
      /* 自动布局子元素 */
      position: static;
      left: 0px;
      top: 46px;
      border-radius: 5px;
      max-height: 500px;
      opacity: 1;

      /* 自动布局 */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      background: rgba(10, 56, 48, 0.7);
      box-sizing: border-box;
      border: 1px solid rgba(59, 214, 172, 0.6);

      z-index: 1;
    }
  }

  ::v-deep .el-table {
    background-color: rgba(59, 214, 172, 0.1);

    tr {
      background-color: rgba(59, 214, 172, 0.1);
    }

    th {
      background-color: rgba(59, 214, 172, 0.1);
    }
  }

  ::v-deep .el-pager {
    li {
      background-color: rgba(59, 214, 172, 0.1);
    }
  }

  ::v-deep .el-pagination {
    .btn-prev {
      background-color: rgba(59, 214, 172, 0.1);
    }

    .btn-next {
      background-color: rgba(59, 214, 172, 0.1);
    }
  }
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color:  rgba(59, 214, 172, 0.1) !important;
   /* color: #fff; */
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background-color: transparent;//设置透明
}
</style>
